<app-sidebar-nav>
	<div class="easyui-accordion" data-options="noheader:true,border:false">
		<div data-options="title: '{group.title}', iconCls: '{group.icon}'" each={ group in groups}>
			<div class="easyui-menu" data-options="inline:true,fit:true,itemHeight:30" style="width:100%">
				<div  data-options="iconCls:'{item.icon}'" each={ item in group.items} onclick={navTo}>
					{item.title}
				</div>
			</div>
		</div>
	</div>
	<script>
		var tag = this;
		tag.groups = [];

		tag.on('mount', function(){
			$.get('/static/json/app.menu.json', function(data) {
				tag.groups = data;
				tag.update();
				$.parser.parse(tag.root);
			});
		});
		tag.navTo = function(e){
			$.publish('tab:open', e.item.item);
		}
	</script>
	<style>
		:scope .accordion .accordion-header {
			background-color: #2f4050;
			border-width: 0;
			height: 28px;
			line-height: 28px;
		}
		:scope .accordion .accordion-header .panel-title, :scope .accordion .accordion-header .panel-icon {
			color: #a7b1c2 !important;
			line-height: 18px;
    		height: 18px;
		}
		:scope .accordion .accordion-header .panel-title {
			padding-left: 24px;
		}
		:scope .accordion .accordion-body {
			border-width: 0;
		}
		:scope .menu {
			height: auto !important;
			background-color: #243747;
			border-color: #243747;
			color: #a7b1c2;
			padding-left: 12px;
		}
		:scope .menu:before {
			content: '';
			width: 3px;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			background: #337C40;
		}
		:scope .menu-line {
			display: none;
		}
		:scope .menu-item {
			border-color: transparent;
		}
		:scope .menu-active {
			background-color: transparent;
		}
		:scope .accordion .accordion-header-selected {
			background: #243747;
		}
		:scope .panel-tool a:hover {
			background-color: transparent;
		}
		:scope .accordion-collapse {
			background: none;
			display: inline-block;
			font: normal normal normal 14px/1 FontAwesome;
			font-size: inherit;
			text-rendering: auto;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
			color: #a7b1c2;
			text-align: center;
			margin-right: 5px;
		}
		:scope .accordion-collapse:before {
			content: "\f077";
			display: inline-block;
		}
		:scope .accordion-expand {
			color: #a7b1c2;
		}
		:scope .accordion-expand:before {
			content: "\f078";
		}
	</style>
</app-sidebar-nav>